<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <wangjianlin></wangjianlin>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        //父子组件之间相互传递数据，就叫做父子组件通信
        // ！！！  组件之间相互独立，数据不能相互直接访问

        // 在实际开发当中，经常会遇到父组件中的数据，需要传递给子组件使用的情况

        // 这时就需要用到父->子通信的手段

        // 父组件给子组件传递数据，用的叫做 属性传值 

        // 1. 父组件在使用子组件的时候，可以将需要传递给子组件的数据，通过html标签的属性，进行传递
        // 2. 子组件中，需要声明props数组，在数组中添加，对应的属性名，来接收父组件传递过来的数据，  在数组中添加的属性名，必须和父组件传递数据的时候用的属性名完全一致
        // 3. 在子组件中，就可以通过属性名，直接访问父组件传递过来的数据了





        Vue.component("wangjianlin", {
            template: "<div>王健林说:{{msg}} <wangsicong :diegaosuerzi='msg'></wangsicong></div>",
            data(){
                return {
                    msg: "万达是我的"
                }
            }
        })

        Vue.component("wangsicong", {
            template: "<div>王思聪说:{{diegaosuerzi}}</div>",
            props: ["diegaosuerzi"]
        })

        var vm = new Vue({
            el: "#app",
            data: {
            }
        })
    </script>
</body>

</html>